<template>
  <div class="content">
    <div class="c-left">
      <gird-list />
      <data-total :listData="dataList" />
    </div>
    <div class="c-map">
      <map-main :listData="dataList" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import { useMassifStore } from "@/store/modules/massif";
const massifStore = useMassifStore();
const GirdList = defineAsyncComponent(() => import("./component/girdList.vue"));
const DataTotal = defineAsyncComponent(
  () => import("./component/dataTotal.vue")
);
const mapMain = defineAsyncComponent(
  () => import("@/components/mapMain/index.vue")
);
let dataList = ref();

onMounted(() => {
  dataList.value = massifStore.massifList.slice(0, 2);
});
</script>

<style scoped lang="scss">
.content {
  position: relative;
  display: flex;

  .c-left {
    position: absolute;
    top: 88px;
    left: 0;
    z-index: 2;
    width: 500px;
    height: calc(100% - 88px);
    padding: 20px 0 20px 20px;
    background: linear-gradient(
      to right,
      rgb(0 25 46 / 100%),
      rgb(0 25 46 / 80%) 60%,
      rgb(0 25 46 / 10%)
    );
  }

  .c-map {
    flex: 1;
    overflow: hidden;
  }
}
</style>
